<template>
  <layout :appHeader="{ title: $route.name }">
    <scroll-view class="product-list" scroll-y="true" v-if="productList.length > 0">
      <view v-for="(item, index) in productList" :key="index" class="product-item-container" @click="gotoPolicyDetail()">
        <view class="header">
          <view class="left">
            <view class="company">{{ item.company }}</view>
            <view class="product-name">{{ item.productName }}</view>
          </view>
          <image class="cover-image" :src="item.coverImage" mode="scaleToFill" />
        </view>
        <view class="body">
          <view class="overview">
            <view class="row">
              <view class="label">保單號: </view>
              <view class="value">B335988059</view>
            </view>
            <view class="row">
              <view class="label">保單狀態: </view>
              <view class="value">已生效</view>
            </view>
            <view class="row">
              <view class="label">保費: </view>
              <view class="value">$200,000</view>
            </view>
          </view>
        </view>
        <view class="footer">
          <!-- <button class="detail-button" @click="autoHosting()">一鍵託管</button> -->
          <button class="detail-button" @click.stop="gotoRenewal()">續費</button>
          <!-- <button class="detail-button" @click.stop="gotoPolicyDetail()">查看詳情</button> -->
        </view>
      </view>
    </scroll-view>
    <view v-else class="no-data">
      <image class="no-data-image" src="https://perfectdiary-public-dev.oss-cn-shenzhen.aliyuncs.com/material/image/2021/07/7ae9b327b8eb4e29a712b87518049e78.png" />
    </view>
    <tui-fab :btnList="btnList" bgColor="#515cc3" right.nubmer="50" @click="gotoPolicyHosting"></tui-fab>
  </layout>
</template>
<script>
import productList from './product.json';
import tuiFab from "@/components/thorui/tui-fab/tui-fab"
export default {
  data() {
    return {
      productList,
      //data 数据
      btnList: [{
        index: 1,
        bgColor: "#64B532",
        //名称
        text: "託管",
        imgUrl: 'https://pub-img.perfectdiary.com/game/pet/image/2021/08/5ff5b3d9c67c4c18a7007b0de5089fae.png',
        imgHeight: 54,
        imgWidth: 54,
        //字体大小
        fontSize: 28,
        //字体颜色
        color: "#fff"
      }]
    };
  },
  components: {
    tuiFab
  },
  methods: {
    gotoPolicyHosting(obj) {
      console.log(obj.index)
      uni.navigateTo({
        url: 'pages/account/policyHosting/index',
      });
    },
    gotoPolicyDetail() {
      uni.navigateTo({
        url: 'pages/account/policyDetail/index',
      });
    },
    autoHosting() {
      uni.$co.Fun.showToast('提交成功，我們會有專業人員和您聯繫，請耐心等待');
    },
    gotoRenewal() {
      uni.navigateTo({
        url: 'pages/account/renewal/index',
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.product-list {
  padding-left: 20rpx;
  padding-right: 20rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  box-sizing: border-box;
  color: #42475f;
  .product-item-container {
    position: relative;
    padding: 0 30rpx;
    margin-bottom: 24rpx;
    background: #ffffff;
    border-radius: 12rpx;
    .header {
      padding: 20rpx 0;
      display: flex;
      border-bottom: 1rpx solid #f5f5f5;
      font-size: 32rpx;
      .left {
        flex: 2;
        font-weight: bold;
        line-height: 60rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .cover-image {
        width: 120rpx;
        height: 120rpx;
      }
    }
    .body {
      padding: 20rpx 20rpx 20rpx 0;
      display: flex;
      align-items: center;
      .overview {
        display: flex;
        flex-direction: column;
        flex: 2;
        .row {
          font-size: 28rpx;
          font-weight: 500;
          line-height: 88rpx;
          height: 88rpx;
          display: flex;
          justify-content: space-between;
          .label {
            width: 220rpx;
          }
          .value {
            font-weight: 600;
          }
        }
      }
    }
    .footer {
      display: flex;
      align-items: center;
      height: 108rpx;
      justify-content: flex-end;
      .detail-button {
        width: 160rpx;
        display: inline-block;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 24rpx;
        background: #515cc3;
        border-radius: 10rpx;
        color: #fff;
        font-weight: bold;
        margin: 0;
        margin-right: 10rpx;
      }
    }
  }
}
.no-data {
  height: 93vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .no-data-image {
    width: 280rpx;
    height: 280rpx;
  }
}
</style>